<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <ul class="first">
      <li class="foo">list item 1</li>
      <li>list item 2</li>
      <li class="bar">list item 3</li>
    </ul>
    <ul class="second">
      <li class="foo">list item 1</li>
      <li>list item 2</li>
      <li class="bar">list item 3</li>
    </ul>
    <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("ul.first")
          .find(".foo")
          .css("background-color", "red")
          .end()
          .find(".bar")
          .css("background-color", "green");
      });
    </script>
  </body>
</html>
